<template>
  <main class="pug-pro-basicLayout-content pug-pro-basicLayout-has-header">
    <div class="pug-pro-page-container">
      <div class="pug-pro-page-container-warp">
        <div class="pug-page-header has-breadcrumb">
          <div class="pug-page-header-heading">
            <div class="pug-page-header-heading-left">
              <span class="pug-page-header-heading-title" title="分步表单">{{ opid ? '修改轮播图' : "添加轮播图" }}</span>
              {{ opid ? '编辑的id是:' : "" }}{{ opid }}
            </div>
          </div>
          <div class="pug-page-header-content">
            <div class="pug-pro-page-container-detail">
              <div class="pug-pro-page-container-main">
                <div class="pug-pro-page-container-row">
                  <div class="pug-pro-page-container-content">
                    轮播图页新闻主页轮播图管理，放上喜欢的妹子吧。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pug-pro-grid-content">
        <div class="pug-pro-grid-content-children">
          <div class="pug-pro-layout-watermark-wrapper" style="position: relative;">
            <div class="pug-pro-page-container-children-content">

              <div  class="pug-card mt20">
                <div class="pug-card-body">
<!--                  <div class="pug-debug-result">{{banner}}</div>-->
                  <div class="pug-row" style="justify-content: center">
                    <div class="pug-col   pug-col-lg-3" style="padding-left: 8px; padding-right: 8px;">
                      <pug-upload @callback="uploadSuccess" modal="2" cref="img" uploadname="img" :img="banner.img || 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png'" v-model="banner.img"></pug-upload>
                      <div style="display: none;"><pug-input  placeholder="请输入封面图标" cref="img"  v-model="banner.img" type="text"></pug-input></div>
                    </div>
                    <div class="pug-col pug-col-lg-8" style="padding:0 30px;">
                      <div autocomplete="off" class="pug-form pug-form-vertical pug-form-hide-required-mark">
                        <input type="hidden" v-model="banner.id" cref="id"/>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="标题">标题
                              <span class='pug-valid-label'>(*必填)</span>
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input  placeholder="请输入标题" cref="name" maxlen="128"  v-model="banner.name" type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>

<!--                        <div class="pug-row pug-form-item" style="row-gap: 0px;">-->
<!--                          <div class="pug-col pug-form-item-label">-->
<!--                            <label class="pug-form-item-required" title="描述">描述-->
<!--                              <span class='pug-valid-label'>(*必填)</span>-->
<!--                            </label>-->
<!--                          </div>-->
<!--                          <div class="pug-col pug-form-item-control">-->
<!--                            <div class="pug-form-item-control-input">-->
<!--                              <div class="pug-form-item-control-input-content">-->
<!--                                <textarea rows="4" placeholder="请输入描述" id="description" v-model="banner.description" maxlength="512" class="pug-input pro-field pro-field-xl"></textarea>-->
<!--                              </div>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                        </div>-->

                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="排序字段">排序
                              <span class='pug-valid-label'>(*必填)</span>
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input  placeholder="请输入排序" cref="sorted" maxlen="11"  v-model="banner.sorted" type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="发布状态">发布状态
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-radio v-model="banner.status" cref="status" :items='[{text:"是",value:1},{text:"否",value:0}]' :is-value="false"></pug-radio>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="删除状态 0未删除 1删除">删除状态 0未删除 1删除
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-radio v-model="banner.isdelete" cref="isdelete" :items='[{text:"不删除",value:0},{text:"删除",value:1}]' :is-value="false"></pug-radio>
                              </div>
                            </div>
                          </div>
                        </div>

<!--                        <div class="pug-row pug-form-item" style="row-gap: 0px;">-->
<!--                          <div class="pug-col pug-form-item-label">-->
<!--                            <label class="pug-form-item-required" title="内容">内容-->
<!--                              <span class='pug-valid-label'>(*必填)</span>-->
<!--                            </label>-->
<!--                          </div>-->
<!--                          <div class="pug-col pug-form-item-control">-->
<!--                            <div class="pug-form-item-control-input">-->
<!--                              <div class="pug-form-item-control-input-content">-->
<!--                                <pug-editor :cheight="500" placeholder="请输入内容" target="content" v-model="banner.content"></pug-editor>-->
<!--                              </div>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                        </div>-->

                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="开始时间">开始时间
                              <span class='pug-valid-label'>(*必填)</span>
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <div class="pug-picker pug-picker-range pro-field pro-field-md">
                                  <div class="pug-picker-input pug-picker-input-active">
                                    <input readonly="" placeholder="开始时间" cref="starttime" size="12" @click="timeshoweventstarttime" autocomplete="off" v-model="banner.starttime"/>
                                  </div>
                                  <span class="pug-picker-suffix"><span aria-label="calendar" class="anticon anticon-calendar"><svg viewbox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></span>
                                  <pug-calendar @callback="timecallbackstarttime" v-show="timeshowstarttime" target="starttime" v-model="banner.starttime"></pug-calendar>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="结束时间">结束时间
                              <span class='pug-valid-label'>(*必填)</span>
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <div class="pug-picker pug-picker-range pro-field pro-field-md">
                                  <div class="pug-picker-input pug-picker-input-active">
                                    <input readonly="" placeholder="结束时间" cref="endtime" size="12" @click="timeshoweventendtime" autocomplete="off" v-model="banner.endtime"/>
                                  </div>
                                  <span class="pug-picker-suffix"><span aria-label="calendar" class="anticon anticon-calendar"><svg viewbox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></span>
                                  <pug-calendar @callback="timecallbackendtime" v-show="timeshowendtime" target="endtime" v-model="banner.endtime"></pug-calendar>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
<!--                        <div class="pug-row pug-form-item" style="row-gap: 0px;">-->
<!--                          <div class="pug-col pug-form-item-label">-->
<!--                            <label class="pug-form-item-required" title="作者头像">作者头像-->
<!--                            </label>-->
<!--                          </div>-->
<!--                          <div class="pug-col pug-form-item-control">-->
<!--                            <div class="pug-form-item-control-input">-->
<!--                              <div class="pug-form-item-control-input-content">-->
<!--                                <div class="pug-form-item-control-input-content">-->
<!--                                <span class="pug-input-affix-wrapper pro-field pro-field-md">-->
<!--                                    <input  placeholder="请上传作者头像" id="avatar" class="pug-input" type="text" v-model="banner.avatar"/>-->
<!--                                    <pug-upload @callback="uploadSuccess" cref="avatar" v-model="banner.avatar"></pug-upload>-->
<!--                                </span>-->
<!--                                </div>-->
<!--                              </div>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                        </div>-->
<!--                        <div class="pug-row pug-form-item" style="row-gap: 0px;">-->
<!--                          <div class="pug-col pug-form-item-label">-->
<!--                            <label class="pug-form-item-required" title="分类">分类-->
<!--                              <span class='pug-valid-label'>(*必填)</span>-->
<!--                            </label>-->
<!--                          </div>-->
<!--                          <div class="pug-col pug-form-item-control">-->
<!--                            <div class="pug-form-item-control-input">-->
<!--                              <div class="pug-form-item-control-input-content">-->
<!--                                <pug-select showtext="请选择分类" cref="categoryid" :items="citems" v-model="banner.categoryid"></pug-select>-->
<!--                              </div>-->
<!--                            </div>-->
<!--                          </div>-->
<!--                        </div>-->
                        <!--保存和下一步按钮-->
                        <div class="pug-space pug-space-horizontal pug-space-align-center"
                             style="flex-wrap: wrap; gap: 8px;">
                          <div class="pug-space-item" style="">
                            <router-link to="/banner"><button  class="pug-btn pug-btn-primary mr10"><span><i class="iconfont icon-icon_arrow_left pr3 fz13"></i>返回</span></button></router-link>

                          </div>
                          <div class="pug-space-item" style="">

                            <button type="button" v-if="banner.id" class="pug-btn " @click="saveorupdate()"><span><i class="iconfont icon-quanbudingdan pr3"></i>编辑</span></button>
                            <button type="button" v-if="!banner.id"  class="pug-btn" @click="saveorupdate()"><span><i class="iconfont icon-tianjia pr3"></i>保存</span></button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script>
import bannerService from '@/services/banner'
import categoryService from '@/services/bannercategory'
import pugDialog from "@/plugins/PugDialog";
import pugMessage from "@/plugins/PugMessage";
import {isEmpty,getById,isNotEmpty} from "@/utils/validate";
import cache from "@/utils/cache"
export default {
  name: "BannerAdd.vue",
  components: {},
  data() {
    return {
      opid: "",
      timeshowstarttime:false,
      timeshowendtime:false,
      banner:{
        id:"", // 主键
        name:"", // 标题
        hreflink:"", // 链接地址
        opentype:"", // 打开方式
        description:"", // 描述
        img:"https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png", // 封面图标
        sorted:1 , // 排序字段
        status:1 , // 发布状态
        isdelete:0 , // 删除状态 0未删除 1删除
        content:"", // 内容
        starttime:"", // 开始时间
        endtime:"", // 结束时间
        avatar:"", // 作者头像
        categoryid:"" // 分类
      },
      citems: [{text:"请选择",value:""}], // 装载数据的分类的
      steps: [1, 2, 3]
    }
  },

  created() {
    this.loadCategoires();
    // 根据id轮播图明细
    if(!isEmpty(this.$route.params.id)){
      this.banner.id = this.$route.params.id;
      this.opid = this.$route.params.id;
      // 加载明细
      this.getDetail();
    }else{
      if(isNotEmpty(cache.local.get("banner_save"))) {
        this.banner = cache.local.getJSON("banner_save")
      }
    }
    if(!this.opid){
      this.banner.id=this.opid
    }
  },

  watch:{
    banner:{
      deep:true,
      handler(val){
        cache.local.setJSON("banner_save",val);
      }
    }
  },

  methods: {

    // 加载明细
    async getDetail(){
      try{
        const res = await  bannerService.getBanner(this.opid);
        this.banner = res.data;
      }catch (err) {
        pugMessage.error("服务器异常,代号：1025");
      }
    },

    // 1: 保存方法
    async saveorupdate() {
      try{
        // 校验
        const vresult = await this.validator();
        if(!vresult){
          return;
        }

        pugDialog.confirm('提示',"你确定进行【"+(this.banner.id?'更新':'保存')+"】吗？").then(async ()=>{
          // 执行服务器数据保存轮播图
          const res = await  bannerService.saveUpdateBanner(this.banner);
          if(res.status == 200){
            if(isEmpty(this.banner.id)){
              // 重置数据
              this.reset();
              cache.local.remove("banner_save");
              // 返回列表
              pugMessage.success("添加成功");
              this.$router.push("/banner/list");
            }else{
              cache.local.remove("banner_save");
              // 返回列表
              pugMessage.success("修改成功");
              this.$router.push("/banner/list");
            }
          }
        })
      }catch(err){
        pugMessage.error("服务器异常,代号：1025");
      }
    },

    // 2: 校验
    async validator(){

      if(isEmpty(this.banner.name)){
        pugMessage.error("请输入标题");
        getById('name').focus();
        return false;
      }

      // if(isEmpty(this.banner.hreflink)){
      //   pugMessage.error("请输入链接地址");
      //   getById('hreflink').focus();
      //   return false;
      // }

      // if(isEmpty(this.banner.opentype)){
      //   pugMessage.error("请输入打开方式");
      //   getById('opentype').focus();
      //   return false;
      // }

      if(isEmpty(this.banner.description)){
        pugMessage.error("请输入描述");
        getById('description').focus();
        return false;
      }

      if(isEmpty(this.banner.img)){
        pugMessage.error("请输入封面图标");
        getById('img').focus();
        return false;
      }

      if(isEmpty(this.banner.sorted)){
        pugMessage.error("请输入排序字段");
        getById('sorted').focus();
        return false;
      }

      if(isEmpty(this.banner.status)){
        pugMessage.error("请输入发布状态");
        getById('status').focus();
        return false;
      }

      if(isEmpty(this.banner.isdelete)){
        pugMessage.error("请输入删除状态 0未删除 1删除");
        getById('isdelete').focus();
        return false;
      }

      // if(isEmpty(this.banner.content)){
      //   pugMessage.error("请输入内容");
      //   getById('content').focus();
      //   return false;
      // }

      // if(isEmpty(this.banner.starttime)){
      //   pugMessage.error("请输入开始时间");
      //   //getById('starttime').focus();
      //   return false;
      // }
      //
      // if(isEmpty(this.banner.endtime)){
      //   pugMessage.error("请输入结束时间");
      //   //getById('endtime').focus();
      //   return false;
      // }

      // if(isEmpty(this.banner.avatar)){
      //   pugMessage.error("请输入作者头像");
      //   getById('avatar').focus();
      //   return false;
      // }

      // if(isEmpty(this.banner.categoryid)){
      //   pugMessage.error("请输入分类");
      //   getById('categoryid').focus();
      //   return false;
      // }

      return true;
    },


    // 4: 文件上传回调
    uploadSuccess(response) {
      console.log("uploadSuccess:", response)
    },

    // 5: 重置数据
    reset(){
      this.banner = {
        citems: [{text:"请选择",value:""}],
        id:"", // 主键
        name:"", // 标题
        hreflink:"", // 链接地址
        opentype:"", // 打开方式
        description:"", // 描述
        img:"", // 封面图标
        sorted:"", // 排序字段
        status:"", // 发布状态
        isdelete:"", // 删除状态 0未删除 1删除
        content:"", // 内容
        starttime:"", // 开始时间
        endtime:"", // 结束时间
        avatar:"", // 作者头像
        categoryid:"" // 分类
      }
    },

    timecallbackstarttime() {
      this.timeshowstarttime = false;
    },

    timeshoweventstarttime() {
      this.timeshowstarttime = true;
    },
    timecallbackendtime() {
      this.timeshowendtime = false;
    },

    timeshoweventendtime() {
      this.timeshowendtime = true;
    },

    // 加载分类
    loadCategoires() {
      categoryService.findBannerCategoryList().then(res => {
        var items = res.data;
        this.citems = this.citems.concat(items.map(item=>({text:item.name,value:item.id})));
      })
    }
  }
}
</script>
<style scoped="">
</style>
